{% extends 'fengge/main_base2.html' %}

{% block html_body %}
	{% load staticfiles %}
	<div id="left_part">

		<div id="logo_panel"></div>

		<div id="function_panel">
			<div id="console"></div>
		</div>

		<div id="project_panel">
			<div id="project_panel_head" class="project_panel_head">
				<div id="project_panel_icon" class="icon">图</div>
				<div id="project_panel_name" class="label">未命名工程</div>
				<div id="project_panel_button1" class="button">A</div>
				<div id="project_panel_button2" class="button">B</div>
			</div>
			<div id="project_panel_body" class="nano">
				<ul class="nano-content project_itemlist" id="project_itemlist">
					<!-- 新的实现 -->
{#					<li class="project_item">#}
{#						<div class="thumbnail" id="pi_thumb1">#}
{#							<div class="snapshot">#}
{#								<img src="{% static 'fengge/ui/themes/default/images/con_pic1.jpg' %}"/>#}
{#								<div class="caption">Caption</div>#}
{#							</div>#}
{#							<div class="emblem">3</div>#}
{#						</div>#}
{#						<div class="name">新加点</div>#}
{#						<div class="desc">这是一个新添加的点.</div>#}
{#						<ul class="snapshot_list" id="the_snapshot_list" style="display:none">#}
{#							<li class="snapshot">#}
{#								<img src="{% static 'fengge/ui/themes/default/images/con_pic1.jpg' %}"/>#}
{#								<div class="caption">Caption</div>#}
{#							</li>#}
{#							<li class="snapshot">#}
{#								<div class="close"></div>#}
{#							</li>#}
{#							<li class="snapshot">#}
{#								<div class="close"></div>#}
{#							</li>#}
{#							<li class="clear"></li>#}
{#						</ul>#}
{#						<div class="close"></div>#}
{#					</li>#}
				</ul>
					<!-- 结束拖动区域 -->
			</div>
		</div>
		<div id="project_list_panel">
			<div id="project_list_panel_head" class="project_panel_head">
				<div id="project_list_panel_icon" class="icon">图</div>
				<input id="project_list_panel_name" class="label" type="text"></input>
				<div id="project_list_panel_save" class="button">存</div>
				<div id="project_list_panel_saveas" class="button">另</div>
				<div id="project_list_panel_remove" class="button">删</div>
				<div id="project_list_panel_new" class="button">新</div>
				<input id="project_list_panel_detail" class="label" type="text" value="创建: 2015-03-15 10:30 访问: 2015-05-21 14:00"></input>
				<div id="project_list_panel_desc" class="label">创建: 2015-03-15 10:30 访问: 2015-05-21 14:00</div>
				<div id="project_list_panel_subhead">
					<div id="project_list_panel_label" class="label">我的工程</div>
					<div id="project_list_panel_refresh" class="button">刷</div>
				</div>
			</div>

			<div id="project_list_panel_body" class="nano">
				<ul id="project_list" class="nano-content project_list">
{#					<li class="project_entry">#}
{#						<div class="name">工程1</div>#}
{#						<div class="icon">图</div>#}
{#						<div class="desc">创建: 2015-03-15 10:30 访问: 2015-05-21 14:00</div>#}
{#						<div class="close"></div>#}
{#					</li>#}
				</ul>
			</div>
		</div>
	</div>

	<div id="right_part">
		<div id="tool_panel"></div>
		<div id="map_panel"></div>
	</div>

	<div id="invisible" style="display:none">
		<div id="pointwidget_container"></div>
	</div>
{% endblock %}

{% block script %}
	<script type="text/javascript" src="{% static 'fengge/frontend/yangdw/project.js' %}"></script>
	<script type="text/javascript" src="{% static 'fengge/frontend/yangdw/projectpanel.js' %}"></script>
	<script>
		var onWindowResize = function () {
			$('#right_part').css("width", $(window).width() - $("#left_part").width());
			$('#map_panel').css("height",
					$(window).height() - $("#tool_panel").height()
			);
			$('#project_panel').css("height",
					$(window).height() - $("#logo_panel").height() - $('#function_panel').height()
			);
			$('#project_panel_body').css("height",
					$('#project_panel').height() - $('#project_panel_head').height()
			);
			$('#project_list_panel').css("height",
					$(window).height() - $("#logo_panel").height() - $('#function_panel').height()
			);
			$('#project_list_panel_body').css("height",
					$('#project_list_panel').height() - $('#project_list_panel_head').height()
			);
		};
		$(window).resize(onWindowResize);

		// 启动
		$(function() {
			onWindowResize();
			$(".nano").nanoScroller();
			var projectCore = new FG.ProjectCore();
			var app = new FG.App();
			var sortable = Sortable.create($("#project_itemlist")[0], {
				sort: true,
				animation: 150,
				handle: '.thumbnail'
			});
		})
	</script>

	<script type="text/javascript">
	  // 新快照:
		var openSnapshotList = function(snapshotList) {
			var pitem = snapshotList.parent();
			var pos = pitem.offset();
			var left = pos.left - 4;
			var top = pos.top - 4;
			snapshotList.css('left', left).css('top', top).css('display', 'block');
		};

		var closeSnapshotList = function(snapshotList) {
			snapshotList.css('display', 'none');
		};

		$(".thumbnail").click(function(){
			openSnapshotList($(this).parent().children('.snapshot_list'));
		});

		$(".snapshot_list").mouseleave(function(){
			closeSnapshotList($(this));
		});

		$(".snapshot").click(function(){
			if ($(this).parent().hasClass('snapshot_list')) {
				closeSnapshotList($(this).parent());
			}
		});


	</script>
{% endblock %}
